<template>
  <div class="app-container">
    <el-button type="primary" @click="handleStorage">主要按钮</el-button>
    <el-dialog
      :title="titleStorage"
      :visible.sync="openStorage"
      width="1600px"
      append-to-body
    >
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
        label-width="68px"
      >
        <el-form-item label="采购单号" prop="ordersNumber">
          <el-input
            v-model="queryParams.ordersNumber"
            placeholder="请输入采购单号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="付款状态" prop="paymentStatus">
          <el-select
            v-model="queryParams.paymentStatus"
            placeholder="请选择付款状态"
            clearable
          >
            <el-option
              v-for="dict in dict.type.payment_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            :disabled="multiple"
            @click="handleBulkWarehousing"
            v-hasPermi="['product:ProcuredOrders:edit']"
            >批量入库</el-button
          >
        </el-col>
      </el-row>

      <el-table
        v-loading="loading"
        :data="ProcuredOrdersList"
        @selection-change="handleSelectionChange"
        height="554px"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="采购单号" align="center" prop="ordersNumber" />
        <el-table-column label="采购计划号" align="center" prop="planNumber" />
        <el-table-column label="快递单号" align="center" prop="expressNumber" />
        <el-table-column label="寄往仓库" align="center" prop="companyName">
          <template slot-scope="scope">
            <span v-if="scope.row.companyName">
              {{ scope.row.companyName.slice(0, 10) }}
              <span v-if="scope.row.companyName.length > 10">...</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="下单" align="center">
          <template slot-scope="scope">
            {{ scope.row.approver }}<br />{{
              parseTime(scope.row.approvedTime, "{y}-{m}-{d}")
            }}
          </template>
        </el-table-column>
        <el-table-column label="总件数" align="center" prop="total" />
        <el-table-column label="采购员" align="center" prop="userName" />
        <el-table-column label="运费" align="center" prop="freight" />
        <el-table-column
          label="优惠金额"
          align="center"
          prop="discountAmount"
        />
        <el-table-column label="应付金额" align="center" prop="amountDue" />
        <el-table-column label="入库状态" align="center" prop="inboundStatus">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.inbound_status"
              :value="scope.row.inboundStatus"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="入库总数量"
          align="center"
          prop="inboundNumber"
        />
        <el-table-column label="付款状态" align="center" prop="paymentStatus">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.payment_status"
              :value="scope.row.paymentStatus"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
              >入库</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <el-dialog
        width="72%"
        title="批量入库"
        :visible.sync="innerVisible"
        @close="handleClose"
        append-to-body
      >
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              >添加产品</el-button
            >
          </el-col>
        </el-row>
        <el-table
          v-loading="loading"
          :data="OrdersProductList"
          :row-class-name="rowOrdersProductIndex"
          height="500px"
        >
          <el-table-column
            label="产品编号 "
            align="center"
            prop="productProNo"
          />
          <el-table-column label="产品名称" align="center" prop="productName" />
          <el-table-column
            label="产品单价"
            align="center"
            prop="productPrice"
          />
          <el-table-column label="产品颜色" align="center" prop="colorName" />
          <el-table-column label="品牌" align="center" prop="productBrand" />
          <el-table-column
            label="规格型号"
            align="center"
            prop="productModel"
          />
          <el-table-column
            label="采购数量"
            align="center"
            prop="transferableNumber"
          />
          <el-table-column
            label="未入库数量"
            align="center"
            prop="notStockedNumber"
          />
          <el-table-column label="入库数量" align="center" prop="storageNumber">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.storageNumber"
                placeholder="请输入入库数量"
              ></el-input>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDeleteOrdersProduct(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParamss.pageNum"
          :limit.sync="queryParamss.pageSize"
          @pagination="getList"
        />

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitStorage">确 定</el-button>
          <el-button @click="cancelStorage">取 消</el-button>
        </div>
        <el-dialog
          width="60%"
          title="入库明细"
          :visible.sync="inboundDetails"
          append-to-body
        >
          <el-form
            :model="queryParam"
            ref="queryDetails"
            size="small"
            :inline="true"
            v-show="showSearch"
            label-width="68px"
          >
            <el-form-item label="商品编号 " prop="productProNo">
              <el-input
                v-model="queryParam.productProNo"
                placeholder="请输入商品编号 "
                clearable
                @keyup.enter.native="handleDetails"
              />
            </el-form-item>
            <el-form-item label="产品名称" prop="productName">
              <el-input
                v-model="queryParam.productName"
                placeholder="请输入产品名称"
                clearable
                @keyup.enter.native="handleDetails"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleDetails"
                >搜索</el-button
              >
              <el-button
                icon="el-icon-refresh"
                size="mini"
                @click="resetDetails"
                >重置</el-button
              >
            </el-form-item>
          </el-form>

          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                :disabled="multipleOrdersId"
                @click="bulkSelection"
                >批量选择</el-button
              >
              <!-- @click="handleChoose" -->
            </el-col>
          </el-row>
          <el-table
            v-loading="loading"
            :data="OrdersProductListDetails"
            height="500px"
            @selection-change="handleSelectionChangeOrdersId"
            ref="myTable"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column
              label="产品编号 "
              align="center"
              prop="productProNo"
            />
            <el-table-column
              label="产品名称"
              align="center"
              prop="productName"
            />
            <el-table-column
              label="产品单价"
              align="center"
              prop="productPrice"
            />
            <el-table-column label="产品颜色" align="center" prop="colorName" />
            <el-table-column label="品牌" align="center" prop="productBrand" />
            <el-table-column
              label="规格型号"
              align="center"
              prop="productModel"
            />
            <el-table-column
              label="未入库数量"
              align="center"
              prop="notStockedNumber"
            />

            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-check"
                  @click="bulkSelection(scope.row)"
                  >选择</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParam.pageNum"
            :limit.sync="queryParam.pageSize"
            @pagination="getList"
          />
        </el-dialog>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import {
  getSelectByOrdersIdList,
  getSelectByProductIdList,
  getCancelPutAway,
  getAddInboundProducts,
} from "@/api/depot/voOrdersProduct";
import {
  listProcuredOrders,
  getUpdateInboundNumber,
} from "@/api/orders/ProcuredOrders";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  dicts: ["inbound_status", "payment_status"],
  components: { Treeselect },
  data() {
    return {
      titleStorage: "",
      openStorage: false,
      innerVisible: false,
      inboundDetails: false,
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        ordersNumber: null,
        planId: null,
        paymentStatus: null,
      },
      // 查询参数
      queryParamss: {
        pageNum: 1,
        pageSize: 10,
        ids: [],
      },
      // 查询参数
      queryParam: {
        pageNum: 1,
        pageSize: 10,
        productProNo: null,
        productName: null,
        ordersIds: [],
        voOrdersProductList: [],
      },
      // 遮罩层
      loading: true,
      // 采购订单表格数据
      ProcuredOrdersList: [],
      // 总条数
      total: 0,
      // 非多个禁用
      multiple: true,
      multipleOrdersId: true,
      // 采购订单商品表格数据
      OrdersProductList: [],
      id: [],
      ids: [],
      idss: [],
      // 入库明细表格数据
      OrdersProductListDetails: [],
      // 子表选中数据
      checkedOrdersProduct: [],
      //确认入库用来做判断的
      procuredFlay: true,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询采购订单列表 */
    getList() {
      this.loading = true;
      listProcuredOrders(this.queryParams).then((response) => {
        this.ProcuredOrdersList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    handleStorage() {
      this.titleStorage = "入库信息";
      this.openStorage = true;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.ordersId);
      this.id = selection.map((item) => item.requestId);
      this.multiple = !selection.length;
    },
    handleSelectionChangeOrdersId(selection) {
      this.idss = selection.map((item) => item.id);
      this.multipleOrdersId = !selection.length;
    },

    /** 批量入库 */
    handleBulkWarehousing(row) {
      const ids = row.id || this.ids;
      this.queryParam.ordersIds = ids;
      this.innerVisible = true;
    },
    /** 添加产品 */
    handleAdd() {
      this.inboundDetails = true;
      this.getListOrdersId();
    },
    /** 通过采购单id查询需要入库的数据 */
    getListOrdersId() {
      getSelectByOrdersIdList(this.queryParam).then((response) => {
        this.OrdersProductListDetails = response.rows;
      });
    },

    /** 入库明细搜索按钮操作 */
    handleDetails() {
      this.queryParam.pageNum = 1;
      this.getListOrdersId();
    },
    /** 入库明细重置按钮操作 */
    resetDetails() {
      this.resetForm("queryDetails");
      this.handleDetails();
    },
    /** 批量选择 */
    bulkSelection(row) {
      const ids = row.id || this.idss;
      this.queryParamss.ids = ids;
      this.getListProductId();
      this.inboundDetails = false;
      this.$refs.myTable.clearSelection();
    },
    /** 通过产品id查询需要入库的数据 */
    getListProductId() {
      getSelectByProductIdList(this.queryParamss).then((response) => {
        for (let index = 0; index < response.total; index++) {
          let obj = {};
          obj.productProNo = response.rows[index].productProNo;
          obj.productName = response.rows[index].productName;
          obj.productPrice = response.rows[index].productPrice;
          obj.colorName = response.rows[index].colorName;
          obj.productBrand = response.rows[index].productBrand;
          obj.productModel = response.rows[index].productModel;
          obj.transferableNumber = response.rows[index].transferableNumber;
          obj.notStockedNumber = response.rows[index].notStockedNumber;
          obj.storageNumber = response.rows[index].storageNumber;
          obj.id = response.rows[index].id;
          obj.ordersId = response.rows[index].ordersId;
          obj.productId = response.rows[index].productId;
          this.OrdersProductList.push(obj);
        }
      });
    },
    handleClose() {
      this.OrdersProductList = [];
    },
    /** ${subTable.functionName}序号 */
    rowOrdersProductIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 采购订单商品删除按钮操作 */
    handleDeleteOrdersProduct(row) {
      row.flay = true;
      let array = [];
      array.push(row);
      getCancelPutAway(array);
      this.checkedOrdersProduct = row.index;
      const ordersProductList = this.OrdersProductList;
      const checkedOrdersProduct = this.checkedOrdersProduct;
      this.OrdersProductList = ordersProductList.filter(function (item) {
        return item.index !== checkedOrdersProduct;
      });
    },
    /** 取消入库 */
    cancelStorage() {
      this.OrdersProductList.forEach((item) => {
        item.flay = true;
      });
      if (this.OrdersProductList.length != 0) {
        getCancelPutAway(this.OrdersProductList).then(() => {
          this.innerVisible = false;
          this.OrdersProductList = [];
        });
      }
      this.innerVisible = false;
    },
    /** 确定入库 */
    submitStorage() {
      let exceededProducts = []; // 存储满足条件的产品
      for (let index = 0; index < this.OrdersProductList.length; index++) {
        if (
          parseInt(this.OrdersProductList[index].notStockedNumber) -
            parseInt(this.OrdersProductList[index].storageNumber) <
          0
        ) {
          exceededProducts.push(this.OrdersProductList[index]); // 将满足条件的产品添加到数组中
        } else {
          this.procuredFlay = true;
        }
      }
      if (exceededProducts.length > 0) {
        let proNoList = exceededProducts
          .map((procuredOrdersProduct) => procuredOrdersProduct.productProNo)
          .join(","); // 获取满足条件的产品编号列表

        this.$modal.msgWarning("产品编号" + proNoList + "超出入库数量范围！");
        this.procuredFlay = false;
      }
      if (this.procuredFlay == true) {
        if (this.OrdersProductList.length == 0) {
          this.$modal.msgWarning("您还未选择要入库的信息！");
        } else {
          this.queryParam.voOrdersProductList = this.OrdersProductList;
          getAddInboundProducts(this.queryParam).then(() => {
            this.$modal.msgSuccess("入库成功！");
            this.innerVisible = false;
            for (let i = 0; i < this.ProcuredOrdersList.length; i++) {
              const ordersId = this.ProcuredOrdersList[i].ordersId;
              getUpdateInboundNumber(ordersId);
              this.getList();
            }
            this.queryParam.voOrdersProductList = [];
          });
        }
      }
    },
  },
};
</script>

<style>
</style>
